<template>
  <div class="bookslist">
    <div class="search">
      <div class="log" @click="back">
        <img src="../../public/images/img/arrow_left.png" alt="" />
      </div>
      <div class="sear">新书热卖榜</div>
      <div class="cai">
        <img src="../../public/images/img/menu.png" alt="" />
      </div>
    </div>

    <div class="nav-new">
      <div class="nav-main">
        <ul>
          <li @click="editbooks=2" :class="editbooks==2?'con':''">新书热卖榜</li>
          <li @click="editbooks=1" :class="editbooks==1?'con':''">图书畅销榜</li>
          <li @click="editbooks='童书新书榜'" :class="editbooks=='童书新书榜'?'con':''">童书新书榜</li>
          <li @click="editbooks='童书畅销榜'" :class="editbooks=='童书畅销榜'?'con':''">童书畅销榜</li>
          <li @click="editbooks='热搜榜'" :class="editbooks=='热搜榜'?'con':''">热搜榜</li>
          <li @click="editbooks='好评榜'" :class="editbooks=='好评榜'?'con':''">好评榜</li>
          <li @click="editbooks='飙升榜'" :class="editbooks=='飙升榜'?'con':''">飙升榜</li>
        </ul>
      </div>
      <div class="nav-child">
        <div class="nav2-btn"></div>
        <div class="nav-2-div">
          <ul>
            <li @click="edit='总榜'" :class="edit=='总榜'?'con':''">总榜</li>
            <li @click="edit='童书'" :class="edit=='童书'?'con':''">童书</li>
            <li @click="edit='小说'" :class="edit=='小说'?'con':''">小说</li>
            <li @click="edit='成功/励志'" :class="edit=='成功/励志'?'con':''">成功/励志</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="booklist">
      <ul>
        <li v-for="item in books" :key="item.id">
          <router-link :to="{name:'detail',query:{data: editbooks ,id:item.id} }" href="#">
            <div class="left">
              <div class="book-index">{{ item.id }}</div>
              <div class="book-img">
                <img :src="item.img[0]" alt="" />
              </div>
            </div>
            <div class="right">
              <h2>{{ item.name }}</h2>
              <p class="author">作者： {{ item.author }}</p>
              <p class="author">出版社： {{ item.publishingHouse }}</p>
              <p class="author promo">
                <span class="white">自营</span>

                <span class="qiang">限时抢</span>
              </p>
              <p class="price">
                <span>￥{{ (item.money).toFixed(2) }}</span>
                <del>￥{{ item.originalPrice }}</del>
              </p>
              <p class="star">
                <span
                  class="red-star"
                  v-for="index in parseInt(item.score / 2)"
                  :key="index"
                ></span>
                <span class="num">{{ item.pNum }}条评论</span>
              </p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>

  <footer-nav></footer-nav>

  </div>
</template>

<script>
import { getHomepageBall } from "../api/home";
import FooterNav from '../components/FooterNav.vue';

export default {
  components: { FooterNav },
  data() {
    return {
      booksData: [],
      editbooks:2,
      edit:"总榜",
      books:null,
    };
  },

  methods: {
    getHomepageBallFun(type) {
      getHomepageBall().then((data) => {
        this.booksData = data
        // if (this.editbooks==2) {
          
        //   this.booksData = data.newBooksData;
        // }else if (this.editbooks==1) {
        //   this.booksData = data.booksData;
          
        // }
        // console.log(this.booksData);
      }).then(()=>{
         if (type==1) {
        this.books = this.booksData.booksData;
      }else if (type==2) {
        this.books = this.booksData.newBooksData;
          
        }
      });
    },

    booksLists(type){
      if (type==1) {
        this.books = this.booksData.booksData;
      }else if (type==2) {
        this.books = this.booksData.newBooksData;
          
        }
    },

    back() {
      this.$router.back();
    },
  },
  watch:{
    editbooks:function(newValue){
      // console.log(newValue);
      this.getHomepageBallFun(newValue)
      // this.booksLists(newValue)
      
    }
  },

  created() {
    // this.getHomepageBallFun();
    this.editbooks = this.$route.query.data;
    // console.log(this.editbooks);
  },
};
</script>

<style lang="scss" scoped>
.bookslist {
  .search {
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d8d8d8;
    box-sizing: border-box;
    .log {
      width: 40px;
      height: 39.5px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 10px;
        height: 17px;
      }
    }
    .cai {
      width: 40px;
      height: 39.5px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 8px;
      img {
        width: 21px;
        height: 7px;
      }
    }
    .sear {
      height: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 17px;
      justify-content: center;
      color: #333;
      i {
        width: 14px;
        height: 14px;
        display: block;
        margin: 0 9px;
        font-weight: bold;
        color: #767b83;
      }
      span {
        color: #999999;
        font-size: 14px;
      }
    }
  }
  .nav-new {
    width: 100%;
    overflow: hidden;
    .nav-main {
      display: block;
      position: relative;
      width: 100%;
      overflow-x: hidden;
      overflow-y: hidden;
      ul {
        padding-left: 10px;
        width: 571px;
        transform: translate(0px, 0px);
        font-size: 14px;
        display: flex;
        overflow: hidden;
        border-bottom: 1px solid #e4e4e4;
        height: 44px;
        li {
          text-align: center;
          line-height: 44px;
          height: 44px;
          padding: 0 10px;
          position: relative;
          &.con {
            color: #ff463c;
            &::after {
              content: "";
              display: block;
              width: 13px;
              height: 7px;
              position: absolute;
              z-index: 1;
              left: 50%;
              transform: translateX(-50%);
              bottom: -1px;
              background-image: url("../../public/images/图书榜图片/nav_arrow.png");
              background-position: center bottom;
              background-size: 13px 7px;
              background-repeat: no-repeat;
            }
          }
        }
       
      }
    }
    .nav-child {
      display: block;
      position: relative;
      .nav2-btn {
        display: block;
        position: absolute;
        width: 30px;
        height: 46px;
        right: 0;
        top: 0;
        background-image: url("../../public/images/图书榜图片/arrow_unfolded.png");
        background-size: 11px 7px;
        background-repeat: no-repeat;
        background-position: center;
      }
    }
    .nav-2-div {
      display: block;
      border-bottom: 1px solid #e4e4e4;
      ul {
        padding: 7.2px 30px 7.2px 7.2px;
        max-height: 32px;
        overflow: hidden;
        background-color: #fff;
        overflow: hidden;
        display: flex;
        li {
          height: 18px;
          line-height: 18px;
          padding: 0 12px;
          margin: 7.2px;
          font-size: 12px;
          border: 1px solid rgb(150, 150, 150);
          border-radius: 10px;
          color: rgb(150, 150, 150);
          &.con {
            border-color: rgb(150, 150, 150);
            background-color: rgb(150, 150, 150);
            color: #ffffff;
          }
        }
      }
    }
  }
  .booklist {
    padding-bottom: 45px;
    ul {
      margin-top: 1px;
      li {
        a {
          display: flex;
          border-bottom: 1px solid #e4e4e4;
        }
      }
    }
    .left {
      display: block;
      position: relative;
      width: 33.3%;
      .book-index {
        background: rgb(255, 68, 51);
        color: rgb(255, 255, 255);
        font-size: 12px;
        padding: 0 4px;
        line-height: 15px;
        position: absolute;
        top: 0px;
        left: 0px;
      }
      .book-img {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        img {
          max-width: 75%;
          max-height: 91px;
          padding: 15px 11.5% 15px 13.5%;
        }
      }
    }
    .right {
      width: 66.6%;
      padding: 7px 0;
      color: #a0a0a0;
      h2 {
        font-weight: normal;
        color: #3f3f3f;
        font-size: 16px;
        padding: 0 0 2px;
        line-height: 24px;
        max-height: 48px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: normal !important;
      }
      p {
        &.author {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 12px;
          height: 20px;
          line-height: 20px;
          .white {
            color: #f2303c;
            background-color: #ffffff;
            border: 1px solid #f2303c;
            border-radius: 2px;
            padding: 0 2px;
            margin-right: 2px;
          }
          .qiang {
            font-size: 11px;
            color: #ffffff;
            background-color: #f2303c;
            border: 1px solid #f2303c;
            border-radius: 2px;
            padding: 0 2px;
            margin-right: 2px;
          }
        }
        &.promo {
          padding: 0px 0px;
        }
        &.price {
          padding-top: 2px;
          box-sizing: border-box;
          span {
            font-size: 14px;
            color: #ff4433;
            font-weight: bold;
          }
          del {
            font-size: 12px;
          }
        }
        &.star {
          .red-star {
            width: 16px;
            height: 15px;
            display: inline-block;
            vertical-align: middle;
            padding-bottom: 2px;
            background: url("../../public/images/图书榜图片/red_star.png")
              no-repeat;
            background-size: 16px 15px;
          }
          .num {
            font-size: 12px;
            padding-left: 15px;
          }
        }
      }
    }
  }
}
</style>